<template>
    <div  style="color: white;font-size:25px;float:left;width:200px;line-height: 45px;display: block;">
       客服系统
    </div>
    <div  style="float:left;">
        <el-icon @click="changeMenuState()" style="margin-top: 10px" size="25px" >
            <Fold v-show="menuState.openState" />
            <Expand v-show="!menuState.openState"/>
        </el-icon>
    </div>
    <div style="float: right;line-height: 45px;">
        <el-icon @click="fullScreen" style="margin:10px" size="25px" title="全屏">
            <FullScreen/>
        </el-icon>
        <el-dropdown>
            <div style="line-height: 45px;">
                <el-avatar  style="height:35px;width: 35px;margin: 5px" :src="data.user.avatar" />
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="toMain">个人主页</el-dropdown-item>
                    <el-dropdown-item divided @click="logout">退出登出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <span style="float: right;color: white;margin-right: 5px">{{nickName}}</span>
    </div>
</template>

<script  setup>
    import MenuTree from '@/components/MenuTree.vue'
    import {onBeforeMount,reactive,computed } from 'vue'
    import screenfull from 'screenfull'
    import {ArrowDown, ArrowLeft,
        ArrowRight,
        Delete,
        Edit,
        Share,FullScreen} from '@element-plus/icons-vue'
    import {useRouter} from 'vue-router'
    import { ElMessage } from 'element-plus'
    import { openState } from '@/stores/openState'
    import {navTab} from '@/stores/navTab'
    let navTabStores = navTab()
    let menuState = openState()
    const router = useRouter()
    let data = {
        user:{}
    }
    let nickName = computed(function () {
        let nickNameReal = data.user.nickName
        return nickNameReal.substring(nickNameReal.length - 2, nickNameReal.length)
    })
    onBeforeMount (function(){
        let userdb = JSON.parse(sessionStorage.getItem("user")||"{}")
        data.user = reactive(userdb);
    })
    function logout() {
        router.push("/login",{params:{logout:true}})
        sessionStorage.removeItem("user")
        sessionStorage.removeItem("menu")
        ElMessage({message: '登出成功！',type: 'success'})
        menuState.state = true
        navTabStores.clear()
    }
    function toMain() {
        let item = {name: '个人主页', path:'/currHomePage', clicked:true}
        navTabStores.routeTo(item)
    }
    function changeMenuState() {
        menuState.openState = !menuState.openState
    }
    function fullScreen() {
        if (!screenfull.isEnabled) {
            return false
        }
        screenfull.toggle()
    }
</script>
